<template>
  <div class="reading-material">
    <h3>{{ material.title }}</h3>
    <p>{{ material.content }}</p>
  </div>
</template>

<script>
export default {
  name: 'ReadingMaterialComponent',
  props: {
    material: {
      type: Object,
      required: true
    }
  }
};
</script>

<style scoped>
.reading-material {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 20px;
  white-space: pre-wrap;
}
</style>